<template>
  <div class="tempxyz tableHeight">
    <CCard>
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <strong class="title">周期优选</strong>
        </div>

        <div class="header-right-wraper">
          <!-- <div class="search-wrapper">
            <CInput
              maxlength="50"
              placeholder="按任务名称搜索..."
              v-model="taskName"
              class="input-search-style"
              @keyup.enter="enterfaction"
            />
            <CButton
              color="info"
              class="header-search system-btn-style"
              @click="enterfaction"
            >
              搜索
            </CButton>
          </div> -->
          <!-- data-permission="Btn_ProscessFlow_Sort" -->
          <CButton
            title="创建任务"
            color="info"
            class="header-main-btn system-btn-style"
            @click="createTaskBtn"
          >
            创建任务
          </CButton>
        </div>
      </CCardHeader>

      <CCardBody class="card-body">
        <TableList
          ref="table"
          :getColumn="getColumns"
          :getAxios="getAxios"
          :dataList.sync="dataList"
        >
          <template v-slot:show_details="item">
            <CButton
              title="查看"
              variant="outline"
              class="textBtnStyle onButton system-btn-style"
              @click="lookUp(item.data.row)"
              data-permission="Btn_Template_Up"
              >查看</CButton
            >

            <CButton
              title="编辑"
              variant="outline"
              class="textBtnStyle onButton system-btn-style"
              @click="editBtn(item.data.row)"
              data-permission="Btn_Template_Up"
              >编辑</CButton
            >

            <CButton
              title="启用"
              v-if="item.data.row.status === 1"
              class="textBtnStyle system-btn-style"
              @click="run(item.data.row)"
              data-permission="Btn_PushTask_Star"
            >
              启用
            </CButton>
            <CButton
              title="暂停"
              v-if="item.data.row.status === 0"
              class="textBtnStyle system-btn-style"
              @click="ban(item.data.row)"
              data-permission="Btn_PushTask_Pause"
            >
              暂停
            </CButton>
            <CButton
              title="下载"
              variant="outline"
              class="textBtnStyle onButton system-btn-style"
              @click="downloadRow(item.data.row.id)"
              data-permission="Btn_Template_Del"
              >下载</CButton
            >
            <CButton
              title="删除"
              variant="outline"
              class="textBtnStyle onButton system-btn-style"
              @click="deleteRow(item.data.row.id)"
              data-permission="Btn_Template_Del"
              >删除</CButton
            >
          </template>
        </TableList>
      </CCardBody>

      <Modal
        v-model="runShow"
        draggable
        scrollable
        title="启动任务提示"
        :styles="modalStyle"
      >
        <p slot="header" class="modalHeader">启动任务提示</p>
        <div class="delKuangBody">
          <p>请确认是否启动任务?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="runCancel = false" color="info" class="cancel-btn"
            >取消</CButton
          >
          <CButton @click="runOk" color="info" class="system-btn-style"
            >确定</CButton
          >
        </template>
      </Modal>
      <Modal
        v-model="banShow"
        draggable
        scrollable
        title="暂停任务提示"
        :styles="modalStyle"
      >
        <p slot="header" class="modalHeader">暂停任务提示</p>
        <div class="delKuangBody">
          <p>请确认是否暂停任务?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="banShow = false" color="info" class="cancel-btn"
            >取消</CButton
          >
          <CButton @click="banOk" color="info" class="system-btn-style"
            >确定</CButton
          >
        </template>
      </Modal>
      <Modal
        v-model="deleteRowShow"
        draggable
        scrollable
        title="删除任务提示"
        :styles="modalStyle"
      >
        <p slot="header" class="modalHeader">删除任务提示</p>
        <div class="delKuangBody">
          <p>请确认是否删除任务?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="deleteRowShow = false" color="info" class="cancel-btn"
            >取消</CButton
          >
          <CButton @click="deleteRowOk" color="info" class="system-btn-style"
            >确定</CButton
          >
        </template>
      </Modal>

      <CycleOptimCommon
        ref="createModal"
        :modalShow="createTaskModal"
        :modalTitle="`创建`"
        @close="createTaskModal = false"
        @ok="createModalOk"
      ></CycleOptimCommon>

      <CycleOptimCommon
        ref="updateModal"
        :modalShow="updateTaskModal"
        :modalTitle="`修改`"
        @close="updateTaskModal = false"
        @ok="updateModalOk"
      ></CycleOptimCommon>

      <CycleTaskInfo
        ref="cycleTaskInfo"
        :modalShow="cycleTaskInfoModal"
        @close="cycleTaskInfoModal.modal = false"
      ></CycleTaskInfo>
    </CCard>
  </div>
</template>
<script>
import CycleOptimCommon from "./common/cycleOptimCommon.vue";
import CycleTaskInfo from "./common/cycleTaskInfo.vue";
import TableList from "../../template/table/TableList";
export default {
  name: "cycleOptimization",
  components: {
    CycleOptimCommon,
    TableList,
    CycleTaskInfo,
  },
  data() {
    return {
      modalStyle: {
        top: "200px",
      },
      cycleTaskInfoModal: { modal: false, taskId: 0 },
      cronList: [],
      banShow: false,
      runShow: false,
      deleteRowShow: false,
      clickId: 0,
      taskName: "",
      createTaskModal: false,
      updateTaskModal: false,
      dataList: [],
      getColumns: [
        {
          title: "任务名称",
          key: "taskName",
          className: "centerText",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 180,
          className: "centerText",
        },
        {
          title: "截止时间",
          key: "endTime",
          width: 180,
          className: "centerText",
        },
        {
          title: "执行频率",
          key: "frequence",
          width: 108,
          className: "centerText",
        },
        {
          title: "景数覆盖度(%)",
          key: "coverageRatio",
          width: 120,
          className: "centerText",
        },

        {
          title: "状态",
          key: "note",
          width: 120,
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          width: 300,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.processingApi.autoTaskQuery,
        method: "get", //请求方式
        dataList: {
          sourceId: 1,
          pageNum: "",
          pageSize: "",
        },
      },
    };
  },

  watch: {
    dataList(newVal, oldVal) {
      if (newVal.length < 1) return;
      this.dealWithScanInterval();
    },
  },

  mounted() {},
  activated() {},
  methods: {
    
    lookUp(item) {
      this.cycleTaskInfoModal.modal = true;
      this.cycleTaskInfoModal.taskId = item.id;
    },
    async dealWithScanInterval() {
      let _this = this;
      if (_this.cronList.length < 1) await _this.getCronList();
      for (let i = 0; i < _this.dataList.length; i++) {
        let data = _this.dataList[i];
        data.frequence = data.crontabExpress;

        let arr = _this.cronList.filter((v) => v.value === data.frequence);
        data.frequence = arr.length < 1 ? data.frequence : arr[0].label;

        let taskParameter = JSON.parse(data.taskParameter);
        data.coverageRatio = taskParameter.coverageRatio
          ? taskParameter.coverageRatio
          : 0;

        data.endTime = taskParameter.endTime;
      }

      this.$set(_this.dataList);
    },

    async getCronList() {
      let path = this.$api.processingApi.getAllChildByDictCode;
      let param = {
        dictCode: "cron",
      };

      await this.http.get(path, param).then((res) => {
        if (res.data.code == 0) {
          let dictCodeList = res.data.data.dictCodeList;
          for (let dictCode of dictCodeList) {
            let cron = {
              label: dictCode.dictName,
              value: dictCode.dictCode,
            };
            this.cronList.push(cron);
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    enterfaction() {},
    createTaskBtn() {
      this.createTaskModal = true;
      let data = {};
      data.cronList = this.cronList;
      this.$refs.createModal.init(data, "create");
    },
    createModalOk(data) {
      this.createTaskModal = false;
      let path = this.$api.processingApi.create;

      this.http.post(path, data).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success("创建成功");
          this.refreshTable();
        } else {
          this.$Message.error("创建失败");
        }
      });
    },

    editBtn(data) {
      this.updateTaskModal = true;
      this.clickId = data.id;
      data.cronList = this.cronList;
      this.$refs.updateModal.init(data, "update");
    },

    updateModalOk(data) {
      this.updateTaskModal = false;
      let path = this.$api.processingApi.update + "/" + this.clickId;
      data.status = 0;
      this.http.post(path, data).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success("更新成功");
          this.refreshTable();
        } else {
          this.$Message.error("更新失败");
        }
      });
    },

    deleteRow(id){
      this.deleteRowShow = true;//显示弹窗
      this.clickId = id;//记录数据id值
    },
    deleteRowOk(id){
      this.deleteRowShow = false;//点击确认后关闭弹窗
      let path = this.$api.processingApi.autoTaskDelete + "/" + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success("删除成功");
          this.refreshTable();
        } else {
          this.$Message.error("删除失败");
        }
      });
    },
    run(val) {
      this.runShow = true;
      this.clickId = val.id;
    },
    runOk() {
      let self = this;
      self.dataList = [];
      let path = this.$api.processingApi.updateStatus + "/" + this.clickId;
      let param = {
        status: 0,
      };
      this.runShow = false;
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("启动成功");
          this.refreshTable();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    ban(val) {
      this.banShow = true;
      this.clickId = val.id;
    },

    banOk() {
      this.dataList = [];
      let path = this.$api.processingApi.updateStatus + "/" + this.clickId;
      let param = {
        status: 1,
      };
      this.banShow = false;
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.refreshTable();
          this.$Message.success("暂停成功");
        } else {
          this.$Message.error(res.data.message);
          this.refreshTable();
        }
      });
    },
    refreshTable() {
      let path = this.$api.processingApi.autoTaskQuery;
      let param = {
        sourceId: 1,
        pageNum: 1,
        pageSize: 15,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },
  },
};
</script>
<style scoped>
.cardstyle {
  margin: 10px 0;
}
.tempxyz .card-body {
  overflow-y: auto;
  padding: 30px 20px;
  bottom: 0;
}
</style>